import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  BarsOutlined,
  BarChartOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme,Switch, Space  } from 'antd';
import { Link } from 'react-router-dom';
import { Outlet } from 'react-router-dom';
import {useNavigate} from 'react-router-dom'
import './index.css'
const { Header, Sider, Content } = Layout;
export default function Zhut() {
  const [collapsed, setCollapsed] = useState(false);
  const navigate=useNavigate()
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const tc=()=>{
    navigate('/login')
    localStorage.removeItem('token')
    localStorage.removeItem('role')
  }
  const item=[
    {
      key: '1',
      icon: <UserOutlined />,
      label: <Link to='/zhut/home'>主页</Link>,
    },
    {
      key: '2',
      icon: <BarsOutlined />,
      label: <Link to='/zhut/list'>列表</Link>,
    },
    {
      key: '3',
      icon: <BarChartOutlined />,
      label: <Link to='/zhut/chart'>图表</Link>,
    },
    {
      key: '4',
      icon: <UploadOutlined />,
      label: <Link to='/zhut/upload'>上传</Link>,
    },
  ]
  return (
    <div>
       <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={item}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <span>用户名:{localStorage.getItem('token')}     
              ({localStorage.getItem('role')==='adiam' ? '管理员':'普通用户'})
          </span>
          <Button type="primary" danger className='tc' onClick={()=>tc()}>退出登录</Button>
          <Space direction="vertical">
            <Switch checkedChildren="白天" unCheckedChildren="夜晚" defaultChecked />
          </Space>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 500,
            background: colorBgContainer,
          }}
        >
          <Outlet/>
        </Content>
      </Layout>
    </Layout>
    </div>
  )
}
